<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>织造车间经编机生产运行状态</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <!-- 标题区域 -->
        <header class="header">
            <div class="header-content">
                <div class="logo-section">
                    <img src="images/logo.png" alt="新纺联" class="logo-image">
                </div>
                <div class="title-section">
                    <h1 class="main-title">织造车间经编机生产运行状态</h1>
                    <h2 class="sub-title">Runing station of Warp-knitting machine</h2>
                </div>
                <div class="status-section">
                    <div class="status-bar">
                        <span class="last-update">最后更新: <span id="lastUpdateTime">--</span></span>
                        <span class="auto-refresh">自动刷新: <span id="autoRefreshStatus">开启</span></span>
                        <span class="version-info">版本: <span id="versionNumber">V1.0.9</span></span>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 机器运行状态区域 -->
            <section class="machine-status-section">
                <div class="machine-grid" id="machineGrid">
                    <!-- 机器卡片将通过JavaScript动态生成 -->
                </div>
            </section>

            <!-- 待翻品种计划区域 -->
            <section class="pending-plan-section">
                <h3 class="section-title">经编机待翻品种计划</h3>
                <div class="plan-tables-container">
                    <div class="plan-table-group" id="planTableGroup1">
                        <table class="plan-table">
                            <thead>
                                <tr>
                                    <th>机台</th>
                                    <th>Round 1</th>
                                    <th>Round 2</th>
                                    <th>Round 3</th>
                                </tr>
                            </thead>
                            <tbody id="planTableBody1">
                                <!-- 计划数据将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>
                    <div class="plan-table-group" id="planTableGroup2">
                        <table class="plan-table">
                            <thead>
                                <tr>
                                    <th>机台</th>
                                    <th>Round 1</th>
                                    <th>Round 2</th>
                                    <th>Round 3</th>
                                </tr>
                            </thead>
                            <tbody id="planTableBody2">
                                <!-- 计划数据将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>
                    <div class="plan-table-group" id="planTableGroup3">
                        <table class="plan-table">
                            <thead>
                                <tr>
                                    <th>机台</th>
                                    <th>Round 1</th>
                                    <th>Round 2</th>
                                    <th>Round 3</th>
                                </tr>
                            </thead>
                            <tbody id="planTableBody3">
                                <!-- 计划数据将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>
                    <div class="plan-table-group" id="planTableGroup4">
                        <table class="plan-table">
                            <thead>
                                <tr>
                                    <th>机台</th>
                                    <th>Round 1</th>
                                    <th>Round 2</th>
                                    <th>Round 3</th>
                                </tr>
                            </thead>
                            <tbody id="planTableBody4">
                                <!-- 计划数据将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>
                    <div class="plan-table-group" id="planTableGroup5">
                        <table class="plan-table">
                            <thead>
                                <tr>
                                    <th>机台</th>
                                    <th>Round 1</th>
                                    <th>Round 2</th>
                                    <th>Round 3</th>
                                </tr>
                            </thead>
                            <tbody id="planTableBody5">
                                <!-- 计划数据将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- 机器详情弹框 -->
    <div class="modal" id="machineModal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <div class="modal-header-left">
                    <h3>详情</h3>
                    <div class="machine-number-badge" id="modalMachineNumber">1#</div>
                </div>
                <div class="modal-header-right">
                    <div class="current-speed">
                        <span>当前车速</span>
                        <span id="modalCurrentSpeed">1512</span>
                    </div>
                    <span class="close" id="closeModal">&times;</span>
                </div>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- 弹框内容将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <script src="js/lib/chart.js"></script>
    <script src="js/lib/chartjs-plugin-datalabels.js"></script>
    <script src="js/app.js"></script>
</body>
</html> 